<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { enableStatusOptions, userGenderOptions } from '@/constants/business';
import { translateOptions } from '@/utils/common';
import { ApiUserQuery } from '@/api-services';
import { NetoKit } from '@/typings/neto';

defineOptions({ name: 'UserSearch' });

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef, validate, restoreValidation } = useForm();

const model = defineModel<NetoKit.NullToUndefined<ApiUserQuery>>('model', { required: true });

type RuleKey = Extract<keyof ApiUserQuery, 'userEmail' | 'userPhone'>;


async function reset() {
  await restoreValidation();
  emit('reset');
}

async function search() {
  await validate();
  emit('search');
}
</script>

<template>
  <ElCard class="card-wrapper" :header="$t('common.search')">
    <ElForm ref="formRef" :model="model" label-position="right" :label-width="80">
      <ElSpace>
        <ElFormItem style="width: 300px;" :label="$t('page.manage.user.userType')" prop="userType">
          <ElSelect v-model="model.userType" clearable :placeholder="$t('page.manage.user.form.userType')">
            <ElOption :value="0" :label="$t('page.manage.user.userTypeEnum.default')" />
            <ElOption :value="100" :label="$t('page.manage.user.userTypeEnum.admin')" />
            <ElOption :value="101" :label="$t('page.manage.user.userTypeEnum.superAdmin')" />
            <ElOption :value="102" :label="$t('page.manage.user.userTypeEnum.developer')" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem style="max-width: 600px;" :label="$t('common.timeRange')" prop="timeRange">
          <DatetimepickerGroup ref="datetimepickerGroupRef" v-model:start-time="model.startTime"
            v-model:end-time="model.endTime"></DatetimepickerGroup>
        </ElFormItem>
        <ElFormItem style="max-width: 300px;" :label="$t('common.keyword')" prop="keyWords">
          <ElInput v-model="model.keyWords" :placeholder="$t('common.keywordSearch')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.manage.common.isEnable')" prop="isEnable">
          <ElRadioGroup v-model="model.isEnable">
            <ElRadio :value="true">{{ $t('common.yesOrNo.yes') }}</ElRadio>
            <ElRadio :value="false">{{ $t('common.yesOrNo.no') }}</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElSpace>

      <ElSpace class="w-full justify-end" alignment="end">
        <ElButton @click="reset">
          <template #icon>
            <icon-ic-round-refresh class="text-icon" />
          </template>
          {{ $t('common.reset') }}
        </ElButton>
        <ElButton type="primary" plain @click="search">
          <template #icon>
            <icon-ic-round-search class="text-icon" />
          </template>
          {{ $t('common.search') }}
        </ElButton>
      </ElSpace>
    </ElForm>
  </ElCard>
</template>

<style scoped></style>
